<template>
	<view>
		<view class="head-bac">
			<view class="title":style="[{ paddingTop: safeTop }, { height: menuH }, { lineHeight: menuH }]">门店管理</view>
			
			<view class="shop">
				<view class="">
					<image src="../../static/shop.png" mode=""></image>
					店铺名·24H自助台球(红旗路店)
				</view>
				<view class="">
					<u-icon name="arrow-right" size="16"></u-icon>
				</view>
			</view>
			
			<view class="income" @click="orderIncome()">
				<view class="inc-l">
					<view class="income-text">今日订单数</view>
					<view class="income-num">80</view>
				</view>
				<view class="divide"></view>
				<view class="inc-r">
					<view class="income-text">今日订单数</view>
					<view class="income-num">80</view>
				</view>
				<image class="right-b-img" src="../../static/right-b.png" mode=""></image>
			</view>
			
			<view style="height: 88rpx;width: 1rpx;"></view>
		</view>
		
		<view class="box">
			<view class="facility-box" @click="table">
				<view class="facility">
					<view class="facility-num"> 0<text>台</text></view>
					<view class="facility-text">设备空闲中</view>
				</view>
				<view class="facility">
					<view class="facility-num fac-color2"> 1<text>台</text></view>
					<view class="facility-text">设备使用中</view>
				</view>
				<view class="facility">
					<view class="facility-num fac-color3"> 1<text>台</text></view>
					<view class="facility-text">设备预订中</view>
				</view>
			</view>
			<u-line length="686rpx" style="margin: auto;"></u-line>
			
			<view class="m-title">日常管理模块</view>
			<view class="container">
				<view class="container-each" v-for="(item,index) in list1" @click="toNext(item)">
					<image :src="item.icon" mode=""></image>
					<view class="">{{item.name}}</view>
				</view>
			</view>
			
			<view class="m-title">订单管理模块</view>
			<view class="container">
				<view class="container-each" v-for="(item,index) in list2" @click="toNext(item)">
					<image :src="item.icon" mode=""></image>
					<view class="">{{item.name}}</view>
				</view>
			</view>
			
			<view class="m-title">系统设置模块</view>
			<view class="container">
				<view class="container-each" v-for="(item,index) in list3" @click="toNext(item)">
					<image :src="item.icon" mode=""></image>
					<view class="">{{item.name}}</view>
				</view>
			</view>
			<view class="PlaceAnOrder-btn" @click="logOut">退出登录</view>
			<view style="height: 40rpx;width: 1rpx;"></view>
		</view>
		
	
		<!-- <view class="btn-box">
			<view class="PlaceAnOrder-btn" @click="">退出登录</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuH: this.$menuH || '',
				safeTop: this.$safeTop || 20 + 'px',
				list1:[
					{name:'桌台管理',icon:'../../static/item-1.png',url:'/pages/Table-manage/Table-manage'},
					{name:'活动管理',icon:'../../static/item-2.png',url:'/pages/Table-activity/Table-activity'},
					{name:'客户管理',icon:'../../static/item-3.png',url:'/pages/clientList/clientList'},
					{name:'畅打卡设置',icon:'../../static/item-4.png',url:'/pages/Play-settings/Play-settings'},
					{name:'门店设置',icon:'../../static/item-5.png',url:'/pages/Basic-settings/Basic-settings'},
					{name:'电器管理',icon:'../../static/item-6.png',url:'/pages/electricity-manage/electricity-manage'},
					{name:'人脸识别记录',icon:'../../static/item-7.png',url:'/pages/access-manage/access-manage'},
					{name:'提现记录',icon:'../../static/item-8.png',url:'/pages/Withdrawal-record/Withdrawal-record'},
					{name:'桌台统计',icon:'../../static/item-9.png',url:'/pages/statistics/statistics'}
				],
				list2:[
					{name:'订单管理',icon:'../../static/item-10.png',url:'/pages/order-list/order-list'},
					{name:'预定订单',icon:'../../static/item-11.png',url:'/pages/reserve-order/reserve-order'},
					{name:'充值订单',icon:'../../static/item-12.png',url:'/pages/recharge-order/recharge-order'},
					{name:'畅打卡订单',icon:'../../static/item-13.png',url:'/pages/Play-order/Play-order'},
				],
				list3:[
					{name:'运营管理工具',icon:'../../static/item-14.png',url:'/pages/shop-operation/shop-operation'},
				]
			}
		},
		onLoad() {
			
		},
		methods: {
			logOut(){
				uni.clearStorageSync()
				uni.reLaunch({
					url: '/pages/login/login',
				})
			},
			toNext(item){
				// uni.navigateTo({
				// 	url:item.url
				// })
				this.$authTo(item.url)
			},
			table(){
				this.$authTo('/pages/Table-manage/Table-manage')
			},
			orderIncome(){
				this.$authTo('/pages/order-income/order-income')
			}
		}
	}
</script>

<style lang="scss">
	.head-bac {
		width: 750rpx;
		background: linear-gradient(to bottom, #e3f5f2,#e3f5f2, #f0f8fa, #F7F8FA);
		
		.title {
			font-weight: 800;
			font-size: 40rpx;
			color: #1C274C;
			padding-left: 32rpx;
		}
		
		.shop {
			padding: 30rpx 25rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 622rpx;
			margin: auto;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin-top: 33rpx;
			
			image {
				width: 32rpx;
				height: 32rpx;
				vertical-align: middle;
				margin-right: 16rpx;
			}
			font-weight: bold;
			font-size: 28rpx;
			color: #1C274C;
		}
		
		.income {
			width: 622rpx;
			height: 105rpx;
			background: linear-gradient( 90deg, #4BC264 0%, #7BE491 100%);
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			padding: 40rpx 24rpx 30rpx 40rpx;
			margin: auto;
			margin-top: 32rpx;
			display: flex;
			align-items: center;
			.inc-l {
				width: 265rpx;
			}
			.divide {
				width: 1rpx;
				border-radius: 5rpx;
				height: 88rpx;
				background: #8ADD9B;
			}
			.inc-r {
				width: 285rpx;
				margin-left: 40rpx;
			}
			.income-text {
				font-weight: 500;
				font-size: 26rpx;
				color: rgba(255,255,255,0.7);
			}
			.income-num {
				font-weight: 500;
				font-size: 48rpx;
				color: #FFFFFF;
				line-height: 56rpx;
			}
			.right-b-img {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}
	
	.box {
		width: 750rpx;
		height: 461rpx;
		background: #FFFFFF;
		border-radius: 48rpx 48rpx 0rpx 0rpx;
		position: relative;
		top: -48rpx;
		// padding: 32rpx;
		
		.facility-box {
			display: flex;
			justify-content: space-around;
			text-align: center;
			margin-bottom: 40rpx;
			padding-top: 32rpx;
			.facility {
				.fac-color2 {
					color: #FF7B18;
				}
				.fac-color3 {
					color: #3E9AF4;
				}
			}
			
			.facility-num {
				font-weight: 500;
				font-size: 38rpx;
				color: #4BC264;
				text {
					font-size: 26rpx;
				}
			}
			.facility-text {
				font-weight: 500;
				font-size: 24rpx;
				color: #A4A9B7;
				margin-top: 12rpx;
			}
		}
		
		.m-title {
			font-weight: bold;
			font-size: 30rpx;
			color: #1C274C;
			margin-top: 40rpx;
			padding-left: 32rpx;
		}
		
		
		.container {
			display: flex;
			flex-wrap: wrap;
			margin-top: 12rpx;
			.container-each {
				text-align: center;
				image {
					width: 60rpx;
					height: 60rpx;
				}
				view {
					font-weight: 500;
					font-size: 24rpx;
					color: #1C274C;
					margin-top: 12rpx;
					width: 145rpx;
				}
				
				--n:4;
				--space:calc(100% - var(--n) * 145rpx);
				--h:calc(var(--space) / var(--n) / 2);
				margin:20rpx var(--h)
			}
		}
		
		.PlaceAnOrder-btn {
			width: 686rpx;
			height: 106rpx;
			margin: auto;
			margin-top: 24rpx;
			background: #EDF9F0;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			font-weight: 800;
			font-size: 34rpx;
			color: #4BC264;
			line-height: 106rpx;
			text-align: center;
		}
	}
	
	
	.btn-box {
		// width: 100%;
		// position: fixed;
		// bottom: 40rpx;
		// z-index: 9;
		.PlaceAnOrder-btn {
			width: 686rpx;
			height: 106rpx;
			margin: auto;
			background: #EDF9F0;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			font-weight: 800;
			font-size: 34rpx;
			color: #4BC264;
			line-height: 106rpx;
			text-align: center;
		}
	}
</style>
